<template>
    <page-view>
        <page-header :showBack="true" title="注册"></page-header>
        <div class="content-box">
            <Form>
                <cell-group inset>
                    <field
                    v-model="nickName"
                    name="昵称"
                    label="昵称"
                    placeholder="请输入昵称"
                    :rules="[{ required: true, message: '请填写昵称' }]"
                    />
                    <field
                    v-model="password"
                    type="password"
                    name="密码"
                    label="密码"
                    placeholder="请输入密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
                    />
                    <field name="radio" label="性别">
                    <template #input>
                        <radio-group v-model="user_sex" direction="horizontal">
                        <radio name="男">男</radio>
                        <radio name="女">女</radio>
                        </radio-group>
                    </template>
                    </field>
                    <field
                    v-model="user_phone"
                    name="手机号"
                    label="手机号"
                    placeholder="请输入手机号"
                    :rules="[{ required: true, message: '请填写手机号' }]"
                    />
                    <field
                    v-model="user_email"
                    name="邮箱"
                    label="邮箱"
                    placeholder="请输入邮箱"
                    :rules="[{ required: true, message: '请填写邮箱' }]"
                    />
                    <field name="uploader" label="选择头像">
                    <template #input>
                          <!-- <uploader v-model="touxiang" ></uploader> -->
                          <uploader 
                          v-model="touxiang" 
                          :after-read="afterRead"
                          :max-count="1"
                          />
                    </template>
                    </field>
                  
                    
                </cell-group>
                <div style="margin: 16px;">
                <Button round block type="primary" @click="checkRegister()" :loading="loading" loading-text="加载中" :disabled="loading" color="#EE87A9">
                        注册
                    </Button>
                </div>
            </Form>

        </div>
    </page-view>
</template>

<script>

import { Form, Field, CellGroup,Button,Radio ,RadioGroup,Uploader} from 'vant';
import { reactive, ref, toRefs } from 'vue';
import api from '../utils/api';
export default {
    components: { Form, Field, CellGroup,Button,Radio,RadioGroup,Uploader },
    setup(){
        let loading=ref(false)

        let userInfo=reactive({
            nickName:'',
            user_sex:'男',
            user_phone:'',
            user_email:'',
            user_photo:'',
            password:'',
            touxiang:[
                // {
                //     url: 'https://cdn.jsdelivr.net/npm/@vant/assets/leaf.jpeg',
                //     status: 'uploading',
                //     message: '上传中...',
                // },
                // {
                //     url: 'https://cdn.jsdelivr.net/npm/@vant/assets/tree.jpeg',
                //     status: 'failed',
                //     message: '上传失败',
                // },
                ]

        })

//文件上传完毕后会触发 after-read 回调函数，获取到对应的 file 对象。通过 status 属性可以标识上传状态，uploading 表示上传中，failed 表示上传失败，done 表示上传完成。

 const afterRead = (file) => {
      file.status = 'uploading';
      file.message = '上传中...';


      setTimeout(() => {
        file.status = 'failed';
        file.message = '上传失败';
      }, 1000);
    };


        function checkRegister(){}

    
        return {
            loading,
            checkRegister,
            ...toRefs(userInfo),
            afterRead

        }
    }
    
}
</script>

<style lang="scss" scoped>

</style>